<template>
  <div class="box">
    <div class="header item">
      <span class="title gradient-text-one">可视化平台</span>
      <span class="timer">{{ timer }}</span>
    </div>
    <div class="item1 item">
      <chart :options="option1" />
    </div>
    <div class="item2 item">
      <div class="up">
        <div class="up_item">
          <div class="title">今年累计销售额</div>
          <div class="label">
            <count-to
              :decimals="2"
              :start-val="0"
              :end-val="list2.yearSales"
              :duration="2600"
              class="card-panel-num"
            /><span class="xiao">元</span>
          </div>
        </div>
        <div class="up_item">
          <div class="title">本月累计销售额</div>
          <div class="label">
            <count-to
              :decimals="2"
              :start-val="0"
              :end-val="list2.monthSales"
              :duration="2600"
              class="card-panel-num"
            /><span class="xiao">元</span>
          </div>
        </div>
        <div class="up_item">
          <div class="title">今日累计销售额</div>
          <div class="label">
            <count-to
              :decimals="2"
              :start-val="0"
              :end-val="list2.daySales || 0"
              :duration="2600"
              class="card-panel-num"
            /><span class="xiao">元</span>
          </div>
        </div>
        <div class="up_item">
          <div class="title">本年累计碳排放</div>
          <div class="label">
            <count-to
              :decimals="2"
              :start-val="0"
              :end-val="list2.yearEmission"
              :duration="2600"
              class="card-panel-num"
            /><span class="xiao">Co₂e</span>
          </div>
        </div>
        <div class="up_item">
          <div class="title">本月累计碳排放</div>
          <div class="label">
            <count-to
              :decimals="2"
              :start-val="0"
              :end-val="list2.monthEmission"
              :duration="2600"
              class="card-panel-num"
            /><span class="xiao">Co₂e</span>
          </div>
        </div>
        <div class="up_item">
          <div class="title">今日累计碳排放</div>
          <div class="label">
            <count-to
              :decimals="2"
              :start-val="0"
              :end-val="list2.dayEmission"
              :duration="2600"
              class="card-panel-num"
            /><span class="xiao">Co₂e</span>
          </div>
        </div>
      </div>
      <el-table
        :data="list1.slice(0, 7)"
        style="width: 560px"
        :header-cell-style="{ background: 'rgba(27, 40, 88)' }"
        :row-style="{ background: 'rgba(27, 40, 88)' }"
        ref="list2_ref"
      >
        <el-table-column
          label="编号"
          type="index"
          width="100px"
        ></el-table-column>
        <el-table-column
          v-for="item in list2_c"
          :key="item.prop"
          v-bind="item"
        ></el-table-column>
      </el-table>
    </div>
    <div class="item3 item">
      <chart :options="option4" />
    </div>
    <div class="item4 item">
      <chart :options="option2" />
    </div>
    <div class="item5 item">
      <chart :options="option5" />
    </div>
    <div class="item6 item">
      <el-table
        class="myTable"
        :data="list1"
        style="width: 560px"
        :header-cell-style="{ background: 'rgba(27, 40, 88)' }"
        :row-style="{ background: 'rgba(27, 40, 88)' }"
        height="265px"
        ref="list1_ref"
      >
        <el-table-column
          v-for="item in list1_c"
          :key="item.prop"
          v-bind="item"
        ></el-table-column>
      </el-table>
    </div>
    <div class="item7 item">
      <chart :options="option3" />
    </div>
    <div class="item8 item">
      <el-table
        class="myTable"
        :data="list1"
        style="width: 560px"
        :header-cell-style="{ background: 'rgba(27, 40, 88)' }"
        :row-style="{ background: 'rgba(27, 40, 88)' }"
        height="265px"
        ref="list3_ref"
      >
        <el-table-column
          v-for="item in list3_c"
          :key="item.prop"
          v-bind="item"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import chart from './component/chart/index.vue'
import { getList1, getList2, getList3 } from '@/api_zc/echarts/index'
import CountTo from 'vue-count-to'
export default {
  components: {
    chart,
    CountTo
  },
  data () {
    return {
      timer: new Intl.DateTimeFormat('default', { dateStyle: 'full', timeStyle: 'medium', }).format(new Date()),
      option1: {
        title: {
          text: '【能耗总览】',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {},
        series: {
          radius: '100%',
          center: ['50%', '60%'],
          type: 'gauge',
          pointer: {
            show: false
          },
          splitLine: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              width: 20
            }
          },
          axisLabel: {
            show: false,
          },
          data: [
            {
              value: 20,
              name: '耗电量',
              title: {
                offsetCenter: ['0%', '-50%'],
                color: '#fff',
              },
              detail: {
                offsetCenter: ['0%', '-30%'],
                color: '#fff'
              }
            },
            {
              value: 40,
              name: '耗水量',
              title: {
                offsetCenter: ['0%', '0%'],
                color: '#fff'
              },
              detail: {
                offsetCenter: ['0%', '20%'],
                color: '#fff'
              }
            },
            {
              value: 60,
              name: '碳排放量',
              title: {
                offsetCenter: ['0%', '40%'],
                color: '#fff'
              },
              detail: {
                offsetCenter: ['0%', '60%'],
                color: '#fff'
              }
            }
          ],
        }
      },
      option2: {
        title: [
          {
            left: 'center',
            top: 'center',
            subtext: '能耗总数：1423456',
            subtextStyle: {
              color: '#fff'
            }
          },
          {
            text: '【能耗总数】',
            textStyle: {
              color: '#fff'
            }
          }
        ],
        tooltip: {},
        series: {
          radius: ['70%', '85%'],
          type: 'pie',
          data: [
            { name: '办公耗电量', value: 100 },
            { name: '办公用水量', value: 300 },
            { name: '生产用水量', value: 200 },
            { name: '生产耗电量', value: 100 },
          ]
        }
      },
      option3: {
        title: {
          text: '【销售计划完成率】',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          bottom: 20
        },
        lengend: {},
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: [
          { type: 'value', name: '销售数量' },
          { type: 'value', name: '完成率', axisLabel: { formatter: '{value} %' } },
        ],
        series: [
          {
            type: 'bar',
            name: '已销售',
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            type: 'bar',
            name: '销售计划',
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            type: 'line',
            name: '完成率',
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ],
            yAxisIndex: 1,
          }
        ]
      },
      option4: {
        title: {
          text: '【销售统计】',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          bottom: 20
        },
        lengend: {},
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: { type: 'value' },
        series: [
          {
            type: 'line',
            name: '销售额',
            smooth: true,
            data: []
          },
          {
            type: 'line',
            name: '合同额',
            smooth: true,
            data: []
          }
        ]
      },
      option5: {
        title: {
          text: '【销售排名】',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          bottom: 20
        },
        lengend: {},
        xAxis: {
          type: 'value',
        },
        yAxis: { type: 'category', data: ['公司A', '公司B', '公司C', '公司D', '公司E', '公司F', '公司G', '公司F'] },
        series: [
          {
            type: 'bar',
            colorBy: 'data',
            data: [1000, 896, 569, 400, 300, 200, 190, 100, 50].reverse()
          },
        ]
      },
      list1: [],
      list1_c: [
        { label: '编号', prop: 'id' },
        { label: '物料', prop: 'material.code' },
        { label: '物料名称', prop: 'material.name' },
        { label: '仓库', prop: 'warehouse.code' },
        { label: '仓库名称', prop: 'warehouse.name' },
        { label: '当前库存', prop: 'stock' },
        { label: '库存数量', prop: 'totalStock' },
        { label: '状态', prop: 'status' },
      ],
      list2: [],
      list2_c: [
        { label: '设备', prop: 'material.name' },
        { label: '生产数量', prop: 'stock' },
        { label: '碳排放', prop: 'totalStock' }
      ],
      list3_c: [
        { label: '编号', prop: 'id' },
        { label: '产品', prop: 'material.code' },
        { label: '产品名称', prop: 'material.name' },
        { label: '型号', prop: 'warehouse.code' },
        { label: '型号名称', prop: 'warehouse.name' },
        { label: '规格', prop: 'stock' },
        { label: '规格内容', prop: 'totalStock' },
        { label: '单位', prop: 'status' },
      ],
      list3: [],
    }
  },
  mounted () {
    this.id = requestAnimationFrame(this.foo)
    this.getList()
    this.scroll(this.$refs.list1_ref.bodyWrapper)
    this.scroll(this.$refs.list3_ref.bodyWrapper)
  },
  beforeDestroy () {
    cancelAnimationFrame(this.id)
  },
  methods: {
    foo () {
      this.timer = new Intl.DateTimeFormat('default', { dateStyle: 'full', timeStyle: 'medium', }).format(new Date())
      requestAnimationFrame(this.foo)
    },
    async getList () {
      const data1 = await getList1()
      this.list1 = data1.data
      const data2 = await getList2()
      this.list2 = data2.data
      const data3 = await getList3()
      this.list3 = data3.data
      this.option4.xAxis.data = data3.data.contract.map(item => item.month)
      this.option4.series[0].data = data3.data.order.map(item => item.amount)
      this.option4.series[1].data = data3.data.contract.map(item => item.amount)
    },
    scroll (dom) {
      requestAnimationFrame(function scroll () {
        dom.scrollTop += 1
        if (dom.scrollHeight == dom.clientHeight + dom.scrollTop) {
          dom.scrollTop = 0
        }
        requestAnimationFrame(scroll)
      })
    }
  }
}
</script>

<style lang="scss">
.el-table--fit {
  background-color: rgb(27, 40, 88);
}
.myTable ::-webkit-scrollbar {
  width: 0px;
  height: 10px;
  background-color: rgb(27, 40, 88);
}
.myTable ::-webkit-scrollbar-thumbr {
  background-color: rgb(37, 55, 121);
}
.myTable2 ::-webkit-scrollbar {
  display: none;
}
.myTable2 ::-webkit-scrollbar-thumb {
  background-color: rgb(37, 55, 121);
}
.box {
  height: calc(100vh - 84px);
  display: grid;
  grid-template-rows: 50px 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 16px;
  background-image: url("../../assets/image/bg.png");
  // background-color: #06093f;
  .header {
    grid-column: 1/4;
    text-align: center;
    position: relative;
    line-height: 50px;
    color: #fff;
    .title {
      font-size: 36px;
    }
    .timer {
      position: absolute;
      right: 40px;
    }
  }
  .item {
    background-color: rgba(51, 76, 112, 0.4);
  }
  .item2 {
    grid-column: 2/3;
    grid-row: 2/4;
    display: flex;
    flex-direction: column;
    .up {
      height: 194px;
      display: grid;
      grid-template-rows: 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
      .up_item {
        text-align: center;
        margin-top: 20px;
        color: #b7b9ca;
        .label {
          margin-top: 10px;
          color: #1d87db;
          font-weight: bold;
          font-size: 26px;
        }
        .xiao {
          font-size: 16px;
        }
      }
    }
  }
}
.gradient-text-one {
  background-image: linear-gradient(bottom, #32adff, #5653f3);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>